前九天做 Visual Learning Lab 時，我一直都是在自己的電腦上測試。每次要跑都先進專案資料夾，用 python -m streamlit run app.py 啟動，再從 localhost:8501 打開網站。

從 Day 2 的第一個 Streamlit 畫面，到後來加入 OpenAI API、PDF、Visual Flow、Concept Map、Comparison、PDF 裡的公式和圖表，甚至昨天剛做完的 Explain This，全部其實都只存在我的 localhost。

也就是說，我自己可以測、可以玩，但如果有人問我：

「所以這東西在哪裡可以用？」

我還是只能回答：

「目前在我電腦。」

所以 Day 10 我決定先不加新功能。

今天只做一件事：

把 Visual Learning Lab v0.1 真的放到網路上。

從 localhost 搬到 Streamlit Community Cloud

目前整個專案主要用 Python、Streamlit、OpenAI Responses API、Graphviz 和 pypdf，而且程式本來就一直同步在 GitHub，所以這次我直接使用 Streamlit Community Cloud。

整個部署流程其實比我原本想像中簡單：

GitHub Repo
↓
Streamlit Community Cloud
↓
選擇 main / app.py
↓
設定 OPENAI_API_KEY
↓
Deploy
↓
公開網址

我的 repository 是 f24131128-lgtm/visual-learning-lab，branch 使用 main，entry point 則直接指定 app.py。

真正需要特別注意的是 API Key。

Visual Learning Lab 每次分析內容都需要呼叫 OpenAI API，所以部署到網路上之後，線上版本當然也需要 API Key。但這個東西不能直接寫進 app.py，更不能跟著 GitHub repo 一起公開。

本機原本就是把 Key 放在 .streamlit/secrets.toml，並透過 .gitignore 排除。部署到 Streamlit Community Cloud 之後，則改成在平台的 Secrets 裡設定 OPENAI_API_KEY。

所以真正的 Key 不會出現在 GitHub，也不會直接顯示給使用網站的人。

第一次看到不是 localhost 的 Visual Learning Lab

部署完成之後，我第一次拿到一個真的可以從外面打開的網址：

https://visual-learning-lab-kdemsgmw3swykt5zpqbkc5.streamlit.app/

這個瞬間其實滿奇妙的。

畫面跟前幾天在電腦上看到的幾乎一樣，但網址列已經不是 localhost:8501，而是真的變成 .streamlit.app。

第一個測試我還是拿之前那份已經被我測很多次的 Sinusoids PDF。上傳之後，系統成功顯示 5 頁都有找到文字，也分析了 5 頁；Quick Summary、Key Concepts 和 Source page 都正常出現。

這張對我來說其實比單純看到首頁更重要。

首頁能打開，只代表 Streamlit 部署成功；真的把 PDF 丟進去之後，還可以正常呼叫 OpenAI API、理解教材、保留頁碼來源，才代表前九天做的整條 pipeline 真的一起搬上去了。

目前公開版的主要流程已經變成：

PDF / Text
↓
AI 理解文字與視覺內容
↓
Structured Outputs
↓
判斷教材結構
↓
Flow / Concept Map / Comparison
↓
Explain This

這些東西以前都是我自己在 localhost 一個一個測，現在第一次變成其他人打開同一個網址也能使用。

Concept Map 也真的搬過去了

往下看之後，Day 7 做的 visualization router 也有正常運作。

Sinusoids 這份教材沒有被硬塞成 Flow，而是依照內容結構選成 Concept Map。

像 Laplace Transform 這種有明確解題步驟的教材，比較適合 Visual Flow；Sinusoids 這種概念彼此關聯比較重要，就用 Concept Map；如果內容本身是在比較兩個東西，例如感應馬達和同步馬達，就改成 Comparison。

所以現在公開版已經不只是「把 PDF 丟給 AI 摘要」，而是會先理解內容，再決定要怎麼呈現。

昨天才做完的 Explain This 也一起上線

我最想確認的其實是昨天剛做完的 Explain This。

例如 PDF Page 4 有一張相位旋轉的 Diagram，AI 先把它整理成 Visual Evidence。如果這裡還是看不懂，可以直接按 Explain this，線上版本一樣會在原本內容下面展開 In simple terms、Why it matters、Intuition or example 和 Source context。

像這次它會進一步說明，90° 的旋轉會讓 sine 和 cosine 之間互相轉換，而 180° 的旋轉會讓訊號反號，接著再用圓上的點旋轉去建立直覺。

我覺得這個功能搬上線之後，才真的比較有「學習工具」的感覺。

因為如果只是產生一張漂亮的 Concept Map，看不懂的人還是看不懂。但如果整理後的內容可以繼續往下問「這是什麼？」、「為什麼？」、「可以講簡單一點嗎？」、「可以給我一個例子嗎？」，整個使用方式就開始跟單純摘要器不太一樣。

網站一公開，問題也開始不一樣了

但網站真的公開之後，也第一次出現 localhost 時代根本不用想的問題：

現在真的有人可以使用我的 API 額度了。

使用者雖然看不到我的 API Key，但只要他在網站上上傳 PDF、按 Visualize、按 Explain This，背後實際上還是在呼叫我的 OpenAI API。

所以目前這個 v0.1 我會先把它當成公開測試版。它可以分享，也可以讓別人試，但現在還沒有登入系統、每日用量限制、rate limit，使用者也不能放自己的 API Key。

這也是第一次讓我很明顯感覺到：「讓程式跑起來」跟「把產品公開給別人用」其實是兩件完全不同的事。

以前我只需要擔心程式會不會壞。現在開始還要想誰可以用、會用多少、API 費用誰出、有人一直重複送 request 怎麼辦、有人丟超大的 PDF 又怎麼辦。

這些應該也會是後面真的想把它做成產品時，一定要面對的問題。

Day 10：第一個真的可以用的版本

如果回頭看 Day 1，當時 Visual Learning Lab 其實只有一張 Markdown 畫出來的首頁草圖。

到了 Day 10，目前公開版已經累積到：

文字輸入                  ✓
PDF 上傳                  ✓
PDF 文字理解              ✓
公式 / 圖表理解           ✓
Source Page               ✓
Visual Evidence           ✓
Visual Flow               ✓
Concept Map               ✓
Comparison                ✓
自動選擇視覺化             ✓
Explain This              ✓
公開網址                  ✓

當然這離我一開始想像的完整版本還很遠。

Concept Map 現在還不能點，Flow 也不能直接互動；Explain This 只能用在 Key Concepts 和 Visual Evidence，還不能隨便反白一句話就問；3D、Motion、圖片拆解也都還沒做。

但至少 Day 10 之後，它第一次不是：

「我正在做一個東西。」

而是：

「這個東西現在真的有一個網址，而且別人可以打開。」

目前 v0.1 公開測試版：

https://visual-learning-lab-kdemsgmw3swykt5zpqbkc5.streamlit.app/

目前還在持續開發中，介面、功能和網址都有可能繼續調整。

GitHub Repo：
https://github.com/f24131128-lgtm/visual-learning-lab